{% extends "base-adv.html" %}


{% block content %}
<div style="min-height:610px;">

<div class="container">

<h2>Notifications on comments</h2>


<div class="image-details-comments">
	{% for n in notifications %}
	<div class="comment" id="row-{{ n.key }}">
		<div class="comment-header">
			<div class="pull-right">
		  		<a href="#" notification_id="{{ n.key }}" class="btn-delete-notification" title="Delete notification"><i class="icon icon-remove"></i></a>
		  	</div>
		  	{% if not n.artwork  or not n.comment %}
		  	<div>Image or comment was deleted</div>
		  	{% else %}	
			<h2><a href="/images/details/{{ n.artwork.key.id }}">{{ n.artwork.name }}</a></h2>
			<div>{{ n.date }} <b>{{n.comment.author.nickname}}</b></div>
			{% endif %}
		</div>
		{% if n.comment %}
		<div class="comment-text">
			{{ n.comment.text}}
		</div>
		{% endif %}
	</div>						
	{% endfor %}
</div>

</div>

 
</div>

<script>
$(function() {
	$(".btn-delete-notification").click(
		function() {
			var notificationId=$(this).attr("notification_id");
			$.get("/delete-notification?id="+notificationId,
				function() {
					$("#row-"+notificationId).slideUp();	
				});
		});
})
</script>
{% endblock content %}


